<template>
  <v-container class="mark-maintain">
    <v-app-bar app color="#fff">
      <AppHeader />
    </v-app-bar>
    <v-card class="mark-serch">
      <v-card class="mark-serch-left">
        <input type="text" />
        <div>
          <v-btn tile max-width="35" class="btn btns">
            <span class="iconfont icon-sousuo"></span>
            查询
          </v-btn>
        </div>

        <div class="btn-list">
          <v-btn tile style="border-right: 0px" max-width="35" class="btn btns">
            <span class="iconfont icon-sousuo"></span>
            创建
          </v-btn>
          <v-btn
            :disabled="this.memberTable2.selected.length != 0 ? false : true"
            tile
            max-width="35"
            class="btn actives"
          >
            <span class="iconfont icon-sousuo"></span>
            删除
          </v-btn>
        </div>
      </v-card>
      <v-card class="mark-serch-right">
        <v-data-table
          v-model="memberTable2.selected"
          dense
          :headers="memberTable2.headers"
          :items="memberTable2.desserts"
          :single-select="!deleteUser"
          hide-default-footer
          :page.sync="memberTable2.options.page"
          item-key="userIdentityId"
          :items-per-page="memberTable2.options.itemsPerPage"
          show-select
          class="elevation-1"
        >
        </v-data-table>
        <div class="text-center pt-2">
          <v-pagination
            :page.sync="memberTable2.options.page"
            v-model="memberTable2.options.page"
            :length="memberTable2.options.pageCount"
          ></v-pagination>
        </div>
      </v-card>
    </v-card>
  </v-container>
</template>
<script>
import AppHeader from "../../layout/AppHeader/index.vue";
export default {
  name: "MarkMaintain",
  components: { AppHeader },
  data() {
    return {
      setactive: true,
      deleteUser: true,
      memberTable2: {
        selected: [], //选中数据
        //表格头
        headers: [
          {
            text: "文件类型",
            align: "start",
            sortable: false,
            value: "name",
            divider: true,
          },
          { text: "方案标志", value: "calories", divider: true },
          { text: "创建日期", value: "userIdentityId", divider: true },
        ],
        options: {
          page: 1,
          itemsPerPage: 5,
          pageCount: 0,
        },
        //表格数据
        desserts: [
          {
            name: "Frozen Yogurt",
            calories: 159,
            fat: 6.0,
            userIdentityId: "1",
          },
          {
            name: "Ice cream sandwich",
            calories: 237,
            fat: 9.0,
            userIdentityId: "2",
          },
          {
            name: "Ice cream sandwich",
            calories: 237,
            fat: 9.0,
            userIdentityId: "3",
          },
          {
            name: "Ice cream sandwich",
            calories: 237,
            fat: 9.0,
            userIdentityId: "4",
          },
          {
            name: "Ice cream sandwich",
            calories: 237,
            fat: 9.0,
            userIdentityId: "5",
          },
          {
            name: "Ice cream sandwich",
            calories: 237,
            fat: 9.0,
            userIdentityId: "6",
          },
          {
            name: "Ice cream sandwich",
            calories: 237,
            fat: 9.0,
            userIdentityId: "7",
          },
          {
            name: "Ice cream sandwich",
            calories: 237,
            fat: 9.0,
            userIdentityId: "8",
          },
          {
            name: "Ice cream sandwich",
            calories: 237,
            fat: 9.0,
            userIdentityId: "9",
          },
          {
            name: "Ice cream sandwich",
            calories: 237,
            fat: 9.0,
            userIdentityId: "10",
          },
        ],
      },
    };
  },
  created() {
    // console.log(this.$route.params.id);
  },

  mounted() {
    this.memberTable2.options.pageCount = Math.ceil(this.memberTable2.desserts.length/this.memberTable2.options.itemsPerPage)
  },
  methods: {
    deleteInfo(){
      // let arr = [];
      // this.memberTable2.selected
    }
  },
  watch: {
    memberTable2: {
      handler(newv, old) {
        console.log(newv, old);
      },

      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.mark-serch {
  margin-top: 70px;
  .mark-serch-left {
    input {
      border: 2px solid #eee;
      border-right: 0px;
      text-indent: 5px;
      min-width: 320px;
      max-width: 420px;
    }
    display: flex;
    .btn {
      display: inline-block;
      height: 30px;
      border: 2px solid #eee;
    }
    .btns {
      color: #000000;
    }

    .btn-list {
      margin-left: 20px;
    }
  }
  .mark-serch-right {
    border: 2px solid #eee;
  }
}
</style>
